react router面试题

是从https://www.geeksforgeeks.org/reactjs/top-react-router-interview-questions/#top-react-router-interview-questions-for-advanced获取的。

1. What is React Router?

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

2. How do you install React Router?

You can install React Router using npm or yarn:

Using npm


xxxxxxxxxx
1
1
npm install react-router-dom

Using Yarn


xxxxxxxxxx
1
1
yarn add react-router-dom

3. What are the benefits of using React Router?

Declarative Routing: React Router provides a declarative way to define routing in your application using JSX syntax. This makes it easy to understand and maintain the routing configuration of your application.
Dynamic Routing: React Router supports dynamic routing, that allows you to define routes with parameters that can change based on user input or application state. This makes it easy to create dynamic and data-driven UIs.
Code Splitting: React Router supports code splitting that allows you to split your application into smaller chunks that are loaded on demand.
History Management: React Router provides a history API that allows you to programmatically navigate between different pages in your application, as well as manage browser history (e.g., go back, go forward).
Server-Side Rendering: React Router is compatible with server-side rendering (SSR) frameworks like Next.js, allowing you to render React components on the server and send the fully rendered HTML to the client. This can improve SEO and initial load performance.

4. Can we use React Router with server-side rendering?

Yes, React Router can be used with server-side rendering (SSR). While React Router primarily handles client-side routing, it is compatible with server-side rendering frameworks like Next.js that allows you to render React components on the server and send the fully rendered HTML to the client.

5. What is browser history in React Router?

In React Router, the browser history represents the user's navigation actions and URL changes within a web browser. React Router provides a history object that allows programmatically manipulating the browser's history that enable features like navigation, back and forward actions, and accessing location information.


xxxxxxxxxx
10
1
import { useHistory } from 'react-router-dom';
2
3
function MyComponent() {
4
    const history = useHistory();
5
6
    function handleClick() {
7
        // Programmatically navigate to a new route
8
        history.push('/new-route');
9
    }
10
}

6. Do all routers have to be declared on a single page or can they be spread across multiple pages?

In React Router, routers can be declared across multiple pages or components within your application. It's common to have multiple routers spread across different parts of your application, especially in larger projects or when using frameworks like Next.js for server-side rendering. Each router instance manages a specific portion of your application's UI and navigation logic.

7. What is nested routing?

Nested routing refers to defining routes within other routes in a hierarchical manner. This is commonly used in frameworks like React Router or Next.js to organize and manage complex application structures. Nested routing is particularly useful for applications with multiple layers of content or sections that require their own routing logic.

8. What are breadcrumbs used for in React Router?

In React Router, breadcrumbs are used to show the current page's location within the application's hierarchy of routes. Breadcrumbs provide users with context and help them understand their current location within the application's navigation structure, making it easier to navigate back to previous pages or higher-level sections. In complex applications with nested routes or deep hierarchies, breadcrumbs can be especially useful for users to trace their steps and backtrack if needed.

9. What are the differences between react-router-dom and react-router-native?

	`react-router-dom`	`react-router-native`
Platform	Primarily for web development.	Specifically designed for native mobile app development.
Navigation Components	Provides components designed for web browsers, like `BrowserRouter`, `Link`, and `NavLink`.	Offers components designed for native environments, such as `NativeRouter` and `Link`.
Rendering	Renders using HTML elements and leverages the browser's history API for navigation.	Utilizes native navigation mechanisms provided by the platform (e.g., UINavigationController for iOS).
Styling and UI	Renders standard HTML elements, allowing for easy integration with CSS frameworks.	Renders native UI components, providing a more authentic user experience on mobile devices.
Dependencies	Typically relies on standard web dependencies like `react-dom`.	Requires dependencies on native modules, such as `react-native` and related packages for iOS and Android development.

10. Can we share data among routes in React Router?

There are several ways that you can share data among routes in React Router.

URL Parameters: You can pass data between routes using URL parameters. These parameters can be accessed using the useParams() hook in functional components or this.props.match.params in class components.
State Management: You can use state management libraries like Redux, Context API, or even React's built-in state management to share data between components, including those rendered by different routes.
Query Parameters: Query parameters are appended to the URL as key-value pairs (e.g., ?param1=value1&param2=value2) and can be accessed using the useLocation() hook or this.props.location.query in class components.
Local Storage or Session Storage: You can store data in the browser's local storage or session storage and retrieve it from any component within your application.
Props: If components rendered by different routes are part of a parent-child relationship, you can pass data down the component tree using props.

11. What is activeClassName in React Router?

activeClassName is a prop used in React Router components to specify the CSS class that should be applied to the link when its corresponding route is active. When a link is active, Router applies the specified activeClassName to the link's HTML element, allowing you to style active links differently to provide visual feedback to users.

12. What is the best way to allow users to navigate between different routes without using links?

The best way to allow users to navigate between different routes without using links is to use the React Router. React Router is a library that allows you to declaratively specify which components should be rendered for which routes. This means that you can specify the behavior of your app without having to hardcode links between different pages.


xxxxxxxxxx
1
1
<NavLink to="/" exact activeClassName="active">Home</NavLink>

13. What are the main components of React Router?

The main components of React Router are BrowserRouter, Routes, Route, and Link.

BrowserRouter: This component provides the routing functionality to your React application by synchronizing the UI with the current URL in the browser's address bar.
Routes: The Routes component is a container for defining all the routes in your application. It acts as the parent component for all the Route components.
Route: The Route component is used to define individual routes in your application. It matches the current URL with the specified path and renders the associated component when the URL matches the defined path.
Link: The Link component is used for navigation within your application. When clicked, the Link component prevents the default anchor behavior and navigates to the specified URL using React Router's history API.

14. What is the purpose of `BrowserRouter` in React Router?

The purpose of BrowserRouter in React Router is to provide the routing functionality for web applications by synchronizing the UI with the current URL in the browser's address bar. It uses the HTML5 history API to manipulate the browser's history stack. It provides a seamless user experience by updating the UI based on the current URL and rendering the appropriate components for the corresponding routes.

15. Explain the `Route` component in React Router.

The Route component in React Router is a fundamental element used to define routes in React applications, and helps in the rendering of specific components based on the current URL. It takes props like "path" to specify the URL pattern. With Route, you can create dynamic and declarative routing structures for efficient navigation and rendering of components.

16. How do you create a route with a parameter in React Router?

You can create a route with a parameter using the :paramName syntax, for example:


xxxxxxxxxx
1
1
<Route path ="/users/:userId" component ={UserComponent}/>

17. Explain the difference between `Link` and `NavLink` in React Router.

Feature	Link	NavLink
Functionality	Used to navigate between routes by rendering an anchor tag (`<a>`).	Same functionality as Link but with additional features for styling active links.
activeClassName	No built-in support for adding an active class to the current link.	Supports adding an active class to the current link using the "activeClassName" prop.
Active Style	No built-in support for applying styles to the active link.	Supports applying inline styles to the active link using the "activeStyle" prop.
Exact Matching	Does not support exact matching of the active link's path.	Supports exact matching of the active link's path using the "exact" prop.
Use Case	Suitable for basic navigation without styling active links.	Suitable for navigation with styled active links and precise route matching requirements.

React Router Intermediate Interview Questions

For intermediate developers, we’ll explore advanced topics like nested routes, dynamic routing, and handling query parameters to enhance your routing skills.

18. What is the purpose of the `Redirect` component in React Router?

The Redirect component in React Router are used for programmatic redirection of users from one route to another based on specific conditions. It simplifies navigation management by providing a declarative approach to handle route changes, such as redirecting users to a login page if they are not authenticated or directing them to a dashboard after successful login.

19. How do you handle 404 errors (page not found) in React Router?

To handle 404 errors (page not found) in React Router, you can use a catch-all route at the end of your route configuration that matches any path not explicitly defined by other routes. This catch-all route renders a component to display the 404 error page.


xxxxxxxxxx
9
1
<Router>
2
    <Switch>
3
        <Route path="/" exact component={Home} />
4
        <Route path="/about" component={About} />
5
        <Route path="/contact" component={Contact} />
6
        {/* Catch-all route for 404 errors */}
7
        <Route component={NotFound} />
8
    </Switch>
9
</Router>

20. Explain nested routing in React Router.

Nested routing in React Router are used for defining routes within the components rendered by other routes, that creates a hierarchy of routes. This allows for more control over the rendering of components based on the URL hierarchy. For example, a parent component might render child components based on nested routes, that enables complex UI structures. By nesting routes, you can build applications with modular and reusable components.

21. What is the purpose of the `withRouter` higher-order component in React Router?

The withRouter higher-order component in React Router is used to pass the router-related props (history, location, and match) to a component that is not directly rendered by a <Route> component. This allows access to routing information and functionality within the wrapped component, that enables programmatic navigation, accessing route parameters, or reacting to changes in the URL without the need for prop drilling.

22. How do you access route parameters in React Router?

In React Router, you can access route parameters using the useParams hook or the match.params object.

Using the useParams hook (for functional components) you can extract route parameters from the URL. Here's how you can do it:


xxxxxxxxxx
7
1
import { useParams } from 'react-router-dom';
2
3
function MyComponent() {
4
    const { paramValue } = useParams();
5
6
    // Use paramValue in your component logic
7
}

23. Explain lazy loading with React Router.

Lazy loading with React Router are used to dynamically import components using React.lazy() and to improve the performance of your application by loading components only when needed(asynchronously). This technique splits the code into smaller bundles, reducing initial load times and optimizing resource utilization for larger applications.

24. What are route guards in React Router?

In React Router, route guards are mechanisms that control and manage navigation by preventing route transitions, executing specific actions, or performing checks before rendering a route. They are used for enforcing security policies, implementing authentication and authorization logic, or fetching data before rendering a route.

25. What is the difference between `HashRouter` and `BrowserRouter` in React Router?

Aspect	HashRouter	BrowserRouter
URL Structure	Uses the hash portion of the URL for routing.	Utilizes the HTML5 history API for routing, resulting in cleaner, semantic URLs without the `#` symbol.
Browser Compatibility	Compatible with a wider range of browsers, including older ones.	Best suited for modern browsers that support the HTML5 history API.
Server Configuration	Suitable for environments where server configuration is limited or unavailable.	Requires server configuration to handle URL requests for all routes.
Base URL Handling	Works well for applications deployed at the root of a domain or subdirectory.	May require additional configuration for applications deployed at subdirectories due to potential URL conflicts.
Deployment	Suited for static deployments (e.g., GitHub Pages) or applications where server-side routing is not possible.	Ideal for deployment in environments where server configuration is available, such as traditional web servers like Apache or Nginx.

26. How do you handle query parameters in React Router?

In React Router, you can handle query parameters using the useLocation hook or the location prop provided by the Route component. Here's how you can do it:


xxxxxxxxxx
9
1
import { useLocation } from 'react-router-dom';
2
3
function MyComponent() {
4
    const location = useLocation();
5
    const queryParams = new URLSearchParams(location.search);
6
    const paramValue = queryParams.get('paramName');
7
8
    // Use paramValue in your component logic
9
}

This example uses the useLocation hook to access the current location object, including the search string containing query parameters. You can then parse the search string using the URLSearchParams API to extract the query parameters.

27. What are navigation guards in React Router?

Navigation guards in React Router are used for controlling and managing navigation in the application by intercepting route transitions and executing specific actions or checks before allowing the navigation to proceed. They are used to check security policies, implement complex routing logic, or provide a better user experience by handling navigation events appropriately.

28. What are the benefits of using React Router over traditional server-side routing?

Single-page application (SPA): React Router enables smoother navigation within an application without full page reloads, resulting in a faster and more seamless user experience.
Improved performance: With client-side routing, React Router reduces server load and network latency, leading to faster page loads and better overall performance.
Dynamic routing: React Router supports dynamic URL patterns, making it easier to handle dynamic content and customize routes without server-side configuration.
Code splitting and lazy loading: React Router integrates well with code-splitting techniques, allowing for efficient loading of JavaScript code and resources, which improves initial load times and overall performance.

29. How do you pass props to components rendered by React Router routes?

You can pass props to components rendered by React Router routes using the render or children prop of the Route component, or by using the withRouter HOC.

Using the *component* prop:


xxxxxxxxxx
1
1
<Route path="/example" component={ExampleComponent} />

Using the *render* prop:


xxxxxxxxxx
1
1
<Route path="/example" render={(props) => <ExampleComponent {...props} additionalProp="value" />} />

30. What are route parameters in React Router?

Route parameters in React Router are placeholders within the route path that match specific parts of the URL. They are used to create dynamic routes by using a colon (:) followed by a parameter name. For example, /users/:userId defines a route parameter named userId, capturing any value in the URL following /users/.

31. What is the `exact` prop used for in React Router?

In React Router, the exact prop is used to ensure that a route is only matched if the URL matches the route's path exactly, without any additional trailing characters. When the exact prop is set to true, React Router will only render the component associated with the route if the URL path matches the route's path exactly.

For example, consider the following route configuration:


xxxxxxxxxx
1
1
<Route exact path ="/home" component = {Home}/>

In this case, the Home component will only be rendered if the URL path is exactly /home. If the URL path includes additional characters, such as /home/about, the Home component will not be rendered unless the exact prop is set to true.

32. What is default route in React Router?

In React Router, a default route is a route configuration that matches any URL that doesn't belongs to specific routes defined in the application. It serves as a fallback route which ensures that users are directed to a designated component or page when they navigate to undefined routes, typically used for error handling or displaying a fallback UI.

React Router Interview Questions for Experienced

For experienced developers, this section focuses on optimizing routing strategies, performance, and applying best practices to handle large-scale routing systems efficiently.

38. Explain the difference between server-side routing and client-side routing.

Feature	Server-Side Routing	Client-Side Routing
Location of Routing Logic	Routing logic is handled on the server-side.	Routing logic is handled on the client-side within the browser.
Initial Page Load	The entire page is reloaded from the server for each navigation.	Only the required components and data are loaded, resulting in faster initial page loads.
Network Requests	Each navigation triggers a new request to the server, which returns a new HTML page.	Routes are handled within the browser, so navigation does not require additional server requests.
Page Transitions	Page transitions are typically slower due to the round-trip time between the client and server.	Page transitions are faster and smoother, as they occur within the browser without requiring server interaction.
State Management	Server manages the application state, resulting in limited interactivity and responsiveness.	Client manages the application state, allowing for richer interactivity and responsiveness without requiring server round-trips.

33. What are protected routes in React Router?

Protected routes in React Router are routes that require authentication or authorization, ensuring that only authenticated users or users with specific permissions can access them. By implementing route guards or higher-order components, protected routes prevent unauthorized access to sensitive content within the application, redirecting users to a login page or displaying an error message if authentication or authorization requirements are not met.

34. What is code splitting in React Router?

Code splitting with React Router is a technique used to improve the performance of web applications by splitting the application's JavaScript bundle into smaller, more manageable chunks. Instead of loading the entire JavaScript bundle upfront when a user visits the application, code splitting allows you to load only the code that is needed for the current route or component. This is useful in large applications with many routes or components, as it reduces the initial load time and improves the overall performance of the application.

35. What are nested routes in React Router?

Nested routes in React Router are used to defining routes within other routes, creating a hierarchical structure of routes within your application. This allows you to organize your application's UI into nested components, each with its own set of routes and functionality. Nested routes are useful for building complex user interfaces, where different sections of the UI have their own navigation logic and views.

36. What are route guards in React Router?

Route guards in React Router are used to control access to routes based on certain conditions or permissions. They allow you to intercept navigation attempts and perform actions such as authentication, authorization, or redirection before rendering the requested route.

37. What is the use of lazy loading in React Router?

Lazy loading in React Router is a performance optimization technique that splits the application's code into smaller, manageable chunks and loads them asynchronously only when they are needed. This approach reduces the initial load time of the application by loading only the necessary code for the current route, rather than loading the entire application upfront. By deferring the loading of non-essential code until it's needed, lazy loading improves the overall performance and user experience of the application, particularly in large-scale applications with numerous routes and complex UIs.

38. How do you handle route parameters in React Router?

In React Router, you can handle route parameters using dynamic route matching. Route parameters allow you to define dynamic segments in your route paths and access them as props in your component. Here's how you can handle route parameters:


xxxxxxxxxx
22
1
//Define Route with Parameters:
2
<Route path="/user/:userId" component={UserDetail} />
3
4
//Access Parameters in Component
5
import { useParams } from 'react-router-dom';
6
7
function UserDetail() {
8
    const { userId } = useParams();
9
10
    // Use userId to fetch user data or perform other logic
11
}
12
13
//Navigate with Parameters
14
import { useHistory } from 'react-router-dom';
15
16
function SomeComponent() {
17
    const history = useHistory();
18
19
    function handleClick(userId) {
20
        history.push(`/user/${userId}`);
21
    }
22
}

39. Explain the difference between BrowserRouter and HashRouter in React Router.

Feature	BrowserRouter	HashRouter
Routing Mechanism	Uses HTML5 history API for clean, semantic URLs.	Relies on hash portion of URL for single-page navigation.
Server Configuration	Requires server configuration for all routes.	Suitable for environments with limited server support.
Deployment	Ideal for environments with server configuration.	Suited for static deployments or where server-side routing isn't feasible.
Base URL Handling	Works well for root or subdirectory deployments.	May require additional configuration for subdirectory deployments.
Browser Compatibility	Best suited for modern browsers supporting HTML5 history API.	Compatible with a wider range of browsers due to hash-based routing.

40. What is the purpose of the location object in React Router?

In React Router, the location object represents the current location of the application. It contains information about the URL, including the pathname, search, hash, and other properties related to the current route. The purpose of the location object is to provide components with access to information about the current URL, allowing them to respond to changes in the route's location and perform actions accordingly.

41. How do you handle query parameters in React Router?

In React Router, you can handle query parameters using the useLocation() hook or the location prop passed to your component.


xxxxxxxxxx
9
1
import { useLocation } from 'react-router-dom';
2
3
function MyComponent() {
4
    const location = useLocation();
5
    const queryParams = new URLSearchParams(location.search);
6
7
    // Get specific query parameters
8
    const paramValue = queryParams.get('paramName');
9
}

42. Explain the purpose of the history object in React Router.

The history object in React Router is a JavaScript object that represents the navigation history of the application. It allows you to programatically navigate between different URLs, manipulate the browser's history stack, and listen for changes to the browser's location. The main purpose of the history object is to provide a programmatic way to interact with the browser's history API within your React Router components.

43. What is the purpose of the match object in React Router?

The match object in React Router provides information about how a component's route matches the current URL. It contains several properties that help you access information about the route's path, URL parameters, and other relevant details. The main purpose of the match object is to provide contextual information to the component about its route within the routing hierarchy.

44. What is the significance of the useNavigate hook in React Router

The useNavigate hook is used for programmatically navigating to different routes in a React application. It returns a function that allows you to change the route, pass state, or handle redirects within your components. You would typically use useNavigate when you need to navigate without relying on the Link or NavLink components, such as after a form submission or a conditional action.

45. What is the difference between Route and Switch in React Router?

Feature	Route	Switch
Purpose	Renders a component when the path matches the current URL.	Used to group multiple Route components and render the first match only.
Behavior	Every Route is checked for a match against the current URL.	Only the first Route that matches the current URL is rendered.
Flexibility	Can be used independently or inside a Switch to render a specific route.	Must be used to wrap multiple Route components to provide exclusive rendering.
Matching Routes	Matches any route that meets the defined path pattern.	Stops checking once a route is matched, preventing further route matches.
Use Case	Defines a single route to be rendered based on the current path.	Group multiple routes where only one should be rendered based on the path.

46. How do you handle authentication and authorization using React Router?

You can handle authentication and authorization by creating protected routes using Route guards. If a user is not authenticated, you can redirect them to the login page using the Redirect component or programmatically using the history.push method.


xxxxxxxxxx
18
1
import { Route, Redirect } from 'react-router-dom';
2
3
function ProtectedRoute({ component: Component, ...rest }) {
4
  const isAuthenticated = // check authentication status here;
5
6
  return (
7
    <Route
8
      {...rest}
9
      render={(props) =>
10
        isAuthenticated ? (
11
          <Component {...props} />
12
        ) : (
13
          <Redirect to="/login" />
14
        )
15
      }
16
    />
17
  );
18
}

47. What is React Router's useRouteMatch hook and how is it used?

The useRouteMatch hook is used to match the current URL to a route pattern. It returns a match object that contains details about how the route matches the URL, such as the path and any route parameters. It is particularly useful for creating nested routes or accessing match data without directly using the Route component.


xxxxxxxxxx
11
1
import { useRouteMatch } from 'react-router-dom';
2
3
function MyComponent() {
4
  const match = useRouteMatch('/users/:userId');
5
6
  if (match) {
7
    return <div>User ID: {match.params.userId}</div>;
8
  }
9
10
  return <div>No match</div>;
11
}

48. How does React Router handle route transitions and animations between pages?

React Router itself does not provide built-in animations for route transitions. However, it can be integrated with animation libraries like React Transition Group or Framer Motion to manage animations during route changes. By wrapping route components with animation wrappers and listening to routing changes, developers can create smooth transitions when navigating between different views.

49. What is the exact prop in React Router, and why is it important?

The exact prop ensures that a Route component only matches the URL if it matches exactly. This is important because, without it, React Router will match partial paths (e.g., /home will match both /home and /home/about). By using exact, you prevent incorrect matches.

50. How React Router handle dynamic route rendering and loading for larger applications with multiple routes?

React Router handles dynamic route rendering by using the concept of dynamic routes and code splitting. In larger applications, you can use React’s React.lazy() function to lazily load components for specific routes, which ensures that only the necessary components are loaded when a user navigates to a particular route. This helps reduce the initial load time and improves performance by loading code in chunks as needed.